<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>好学APP - 设置</title>
    <link rel="stylesheet" href="css/styles.css">
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="ios-device">
        <!-- iOS 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span class="status-bar-time">9:41</span>
            </div>
            <div class="status-bar-right">
                <span class="status-bar-signal"><i class="fas fa-signal"></i></span>
                <span class="status-bar-wifi"><i class="fas fa-wifi"></i></span>
                <span class="status-bar-battery"><i class="fas fa-battery-full"></i></span>
            </div>
        </div>
        
        <!-- 应用内容区域 -->
        <div class="app-content">
            <!-- 顶部导航 -->
            <div style="background-color: var(--card-color); padding: 16px; position: sticky; top: 0; z-index: 10;">
                <h1 class="font-bold" style="font-size: 22px;">设置</h1>
            </div>
            
            <!-- 账户设置 -->
            <div class="settings-section">
                <h2 class="settings-section-title">账户</h2>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #e0f2fe;">
                            <i class="fas fa-user" style="color: #0284c7;"></i>
                        </div>
                        <div class="settings-item-title">个人资料</div>
                    </div>
                    <div class="settings-item-right">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #fef3c7;">
                            <i class="fas fa-bell" style="color: #d97706;"></i>
                        </div>
                        <div class="settings-item-title">通知设置</div>
                    </div>
                    <div class="settings-item-right">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #fee2e2;">
                            <i class="fas fa-lock" style="color: #dc2626;"></i>
                        </div>
                        <div class="settings-item-title">隐私与安全</div>
                    </div>
                    <div class="settings-item-right">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
            
            <!-- 学习设置 -->
            <div class="settings-section">
                <h2 class="settings-section-title">学习设置</h2>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #dcfce7;">
                            <i class="fas fa-calendar-alt" style="color: #16a34a;"></i>
                        </div>
                        <div class="settings-item-title">学习计划</div>
                    </div>
                    <div class="settings-item-right">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #dbeafe;">
                            <i class="fas fa-clock" style="color: #2563eb;"></i>
                        </div>
                        <div class="settings-item-title">学习提醒</div>
                    </div>
                    <div class="settings-item-right">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #f3e8ff;">
                            <i class="fas fa-brain" style="color: #9333ea;"></i>
                        </div>
                        <div class="settings-item-title">费曼学习法设置</div>
                    </div>
                    <div class="settings-item-right">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
            
            <!-- 应用设置 -->
            <div class="settings-section">
                <h2 class="settings-section-title">应用设置</h2>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #f3f4f6;">
                            <i class="fas fa-moon" style="color: #4b5563;"></i>
                        </div>
                        <div class="settings-item-title">深色模式</div>
                    </div>
                    <div class="settings-item-right">
                        <label class="toggle-switch">
                            <input type="checkbox">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #ffe4e6;">
                            <i class="fas fa-font" style="color: #e11d48;"></i>
                        </div>
                        <div class="settings-item-title">字体大小</div>
                    </div>
                    <div class="settings-item-right">
                        <span class="mr-2">中</span>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #fef9c3;">
                            <i class="fas fa-language" style="color: #ca8a04;"></i>
                        </div>
                        <div class="settings-item-title">语言</div>
                    </div>
                    <div class="settings-item-right">
                        <span class="mr-2">简体中文</span>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #e0f2fe;">
                            <i class="fas fa-cloud-download-alt" style="color: #0284c7;"></i>
                        </div>
                        <div class="settings-item-title">离线下载</div>
                    </div>
                    <div class="settings-item-right">
                        <label class="toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- 关于与支持 -->
            <div class="settings-section">
                <h2 class="settings-section-title">关于与支持</h2>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #f3f4f6;">
                            <i class="fas fa-info-circle" style="color: #4b5563;"></i>
                        </div>
                        <div class="settings-item-title">关于好学APP</div>
                    </div>
                    <div class="settings-item-right">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #f3f4f6;">
                            <i class="fas fa-question-circle" style="color: #4b5563;"></i>
                        </div>
                        <div class="settings-item-title">帮助与反馈</div>
                    </div>
                    <div class="settings-item-right">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                
                <div class="settings-item">
                    <div class="settings-item-left">
                        <div class="settings-item-icon" style="background-color: #f3f4f6;">
                            <i class="fas fa-star" style="color: #4b5563;"></i>
                        </div>
                        <div class="settings-item-title">评分好学APP</div>
                    </div>
                    <div class="settings-item-right">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
            
            <!-- 退出登录 -->
            <div class="p-3 mt-4 mb-5">
                <button class="btn w-full" style="background-color: #fee2e2; color: #dc2626;">
                    退出登录
                </button>
            </div>
            
            <!-- 版本信息 -->
            <div class="text-center mb-5">
                <p class="text-secondary text-sm">好学APP v1.0.0</p>
                <p class="text-secondary text-sm">© 2023 好学科技</p>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-item" id="tab-home">
                <div class="tab-icon"><i class="fas fa-home"></i></div>
                <div class="tab-label">首页</div>
            </div>
            <div class="tab-item" id="tab-learn">
                <div class="tab-icon"><i class="fas fa-book-open"></i></div>
                <div class="tab-label">学习</div>
            </div>
            <div class="tab-item" id="tab-note">
                <div class="tab-icon"><i class="fas fa-edit"></i></div>
                <div class="tab-label">笔记</div>
            </div>
            <div class="tab-item" id="tab-profile">
                <div class="tab-icon"><i class="fas fa-user"></i></div>
                <div class="tab-label">我的</div>
            </div>
            <div class="tab-item active" id="tab-settings">
                <div class="tab-icon"><i class="fas fa-cog"></i></div>
                <div class="tab-label">设置</div>
            </div>
        </div>
    </div>
</body>
</html>